<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" name="files" id="files-list" />
    <div id="output"></div>
    <div id="progress"></div>
    <script>
      let filesList = document.getElementById("files-list");
      filesList.addEventListener("change", (e) => {
        let info = "",
          output = document.getElementById("output"),
          progress = document.getElementById("progress"),
          files = e.target.files,
          type = "default",
          reader = new FileReader();
        if (/image/.test(files[0].type)) {
          reader.readAsDataURL(files[0]);
          type = "image";
        } else {
          reader.readAsText(files[0]);
          type = "text";
        }
        reader.onerror = () => {
          output.innerHTML =
            "Could not read file, error code is " + reader.error.code;
        };
        let count = 0;
        reader.onprogress = (e) => {
          count++;
          console.log("🚀 ~ filesList.addEventListener ~ count:", count);
          if (e.lengthComputable) {
            progress.innerHTML = `${e.loaded}/${e.total}`;
          }
        };

        reader.onload = () => {
          let html = "";
          switch (type) {
            case "image":
              html = `<img src="${reader.result}">`;
            case "text":
              html = reader.result;
              break;
          }
          output.innerHTML = html;
        };
      });
    </script>
  </body>
</html>
